import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Home from './pages/Home/home'
import About from './pages/About/about'
import MyNavLink from './components/mynavlink/MyNavLink'
export default class App extends Component {
    /*
        1. link为跳转标签
        2. Route为放置路由组件的壳子
        3. BrowserRouter 包起整个app组件用于app内部的切换
        4. 路由组件与普通组件的区别
            1. 写法不同
                一般组件：<Home/>
                路由组件：<Route path="/home" component={Home}></Route>
            2. 存放位置不同
                一般组件：components
                路由组件：pages
            3. 接收到的信息不同
                一般组件：传递什么接收什么
                路由组件：props会有一个对象
        5. navlink 与 link 的区别
            1. navlink在切换时默认会加上active类 如果想防止类冲突 可以使用 activeClassName="xxx" 来使用选中时使用自己的类
    */
    render() {
        return (
            <div>
                {/* <Link activeClassName="aaa" to="/about">about</Link> */}
                <MyNavLink to="/about">about</MyNavLink>
                <br />
                {/* <MyNavLink to="/home">home</MyNavLink> */}
                <MyNavLink to="/home" children="home" />
                {/* 注册路由 */}
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
            </div>
        )
    }
}
